<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Photos of you</title>
    <link href="css/common.css" rel="stylesheet" type="text/css">
    <link href="css/mosaic.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .cs01 {
            background-image: url(images/cs.jpg);
        }

        .cs02 {
            background-image: url(images/ads.png);
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/mosaic.1.0.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.photo-fade').mosaic();
            $('.highlight-btn').toggle(function () {
                        $(this).parent().parent().parent().parent().animate({
                                    width:416,
                                    height:416
                                },
                                250);
                        $(this).addClass("btn-act")
                    },
                    function () {
                        $(this).parent().parent().parent().parent().animate({
                                    width:205,
                                    height:205
                                },
                                250);
                        $(this).removeClass("btn-act")
                    })
            $('.edit-remove-btn').toggle(function () {
                        $('.tools-btn').show()
                        $(this).addClass("btn-act")
                    },
                    function () {
                        $('.tools-btn').hide()
                        $(this).removeClass("btn-act")
                    })
            $('.tools-btn .has-icon').hover(function () {
                $(this).addClass("icon-hover")
            }, function () {
                $(this).removeClass("icon-hover")
            })
        });
    </script>
</head>
<body>
<div class="wrap clearfix">
    <div class="content">
        <div class="headerWrap">
            <div class="custom-avatar"><img src="images/avatar.png" width="32" height="32" alt="avatar"></div>
        </div>
        <div class="tab_content clearfix">
            <ul class="tab_menu">
                <li class="navactive">
                    <div class="nav-left nav-photos-of-you"></div>
                    <div class="nav-right"><span class="nav-count">6</span><span
                            class="nav-subtitle">Photos of you</span></div>
                </li>
                <li>
                    <div class="nav-left nav-photos"></div>
                    <div class="nav-right"><span class="nav-count">6</span><span class="nav-subtitle">Photos</span>
                    </div>
                </li>
                <li>
                    <div class="nav-left nav-album"></div>
                    <div class="nav-right"><span class="nav-count">6</span><span class="nav-subtitle">Album</span></div>
                </li>
            </ul>
        </div>
        <div class="timeline_bg"></div>
        <div class="photos_of_me clearfix">
            <ul class="photo-thumb">
                <li class="photo-fade">
                    <div class="mosaic-block photo-fade">
                        <div class="mosaic-overlay">
                            <div class="photo-control">
                                <div class="highlight-btn"><span>highlight</span></div>
                                <div class="edit-remove-btn"><span>edit-remove</span>
                                    <ul class="tools-btn">
                                        <li class="has-icon"><a href="#"><span class="edit-loc"></span>Edit Location</a>
                                        </li>
                                        <li class="has-icon"><a href="#"><span class="change-date"></span>Change
                                            Date</a></li>
                                        <li class="tools-btn-split"></li>
                                        <li><a href="#">Download</a></li>
                                        <li><a href="#">Make Profile Picture</a></li>
                                        <li class="tools-btn-split"></li>
                                        <li><a href="#">Report/Remove Tag</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="photo-details">
                                <div class="photo-subset"><a href="#">Untitled Album</a></div>
                                <div class="photo-tools clearfix"><a href="#">Like</a> <span>·</span> <a href="#">Comment</a>
                                </div>
                            </div>
                        </div>
                        <div class="mosaic-backdrop cs01"></div>
                    </div>
                </li>
                <li class="photo-fade">
                    <div class="mosaic-block photo-fade">
                        <div class="mosaic-overlay">
                            <div class="photo-control">
                                <div class="highlight-btn"><span>highlight</span></div>
                                <div class="edit-remove-btn"><span>edit-remove</span>
                                    <ul class="tools-btn">
                                        <li class="has-icon"><a href="#"><span class="edit-loc"></span>Edit Location</a>
                                        </li>
                                        <li class="has-icon"><a href="#"><span class="change-date"></span>Change
                                            Date</a></li>
                                        <li class="tools-btn-split"></li>
                                        <li><a href="#">Download</a></li>
                                        <li><a href="#">Make Profile Picture</a></li>
                                        <li class="tools-btn-split"></li>
                                        <li><a href="#">Report/Remove Tag</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="photo-details">
                                <div class="photo-subset"><a href="#">Untitled Album</a></div>
                                <div class="photo-tools clearfix"><a href="#">Like</a> <span>·</span> <a href="#">Comment</a>
                                </div>
                            </div>
                        </div>
                        <div class="mosaic-backdrop cs02"></div>
                    </div>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="side_ads"><img src="images/ads.png" width="244" height="559"></div>
</div>
</body>
</html>
